import React, { PureComponent } from "react";
import AxHeader from "components/AxHeader";
import AxFooter from "components/Footer";
import s from "./index.scss";
import { Flex } from "antd-mobile";
import phonePng from "assets/images/phone.png";
import yzm2Png from "assets/images/yzm2.png";
import Icon from "antd/lib/Icon";
import {callApi} from "app/utils";



export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      phone: "",
      sms: "",
      tipStr:"获取短信验证码",
      isSend:false,
      sendStr:'重新发送(60)秒',
      timer:null,
      time:5,
      authCode:''
   };
   this.handelPhone = this.handelPhone.bind(this)
   this.handelSms = this.handelSms.bind(this)
   this.submitLogin = this.submitLogin.bind(this)
   this.clearValue = this.clearValue.bind(this)
   this.sendSms = this.sendSms.bind(this)
  }

handelPhone(event) {
    console.log(event.target.value);
    this.setState({phone:event.target.value})
}
handelSms(event) {
  console.log(event.target.value);
  this.setState({sms:event.target.value})
}
sendSms(){
  if(this.state.phone == ""){
    Toast.info('请填写手机号码', 1);
    console.log("请填写手机号码");
    return false;
}
if(!(/^1\d{10}$/.test(this.state.phone))) {
    Toast.info('手机号格式不正确', 1);
    console.log("手机号格式不正确");
    return false;
}
  this.setState({
    isSend:true
  })
  
  var getMessageCodeSubmitData={token:JSON.parse(localStorage.getItem("userData")).token,mobile : this.state.phone, srvTxCode : "passwordResetPlus"};
  callApi('/common/sms/get/authCode',getMessageCodeSubmitData,"POST").then((data)=>{
    console.log(data)
    this.setState({
      authCode:data.data.authCode
    })
  })

  this.state.timer = setInterval(()=>{
    this.state.time--
    if(this.state.time==0){
      clearInterval( this.state.timer )
      this.setState({
        isSend:false,
        time:5,
      })
    }
    this.setState({
      sendStr:`重新发送(${this.state.time})秒`,
    })
   
  },1000)
}

clearValue(e){
  if(e=='phone'){
    this.setState({phone:''})
  }
}

submitLogin(){
    
    if(this.state.phone == ""){
        Toast.info('请填写手机号码', 1);
        console.log("请填写手机号码");
        return false;
    }
    if(!(/^1\d{10}$/.test(this.state.phone))) {
        Toast.info('手机号格式不正确', 1);
        console.log("手机号格式不正确");
        return false;
    }
    if(this.state.sms=="") {
        Toast.info('请填写验证码', 1);
        console.log("请填写验证码");
        return false;
    }
    var submitData={mobile : this.state.phone, smsCode : this.state.sms,authCode:this.state.authCode,token:JSON.parse(localStorage.getItem("userData")).token};
    callApi('/account/paypassword/reset',submitData,'POST').then((data)=>{
      if(data.success==true){
       location.href = data.data.ret_url
      }
    })
    
}

  componentDidMount() {

    
  }
  

  render() {
    let { phone , sms } = this.state
    return (
      <div className={`${s.editPwdBox}`}>
        <div>
        <AxHeader />
        <Flex direction="column" className={`${s.formBox}`}>
          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={phonePng} />
            <input
              placeholder="请输入您的手机号"
              type="number"
              className={`${s.phone}`}
              value={phone}
              onChange={this.handelPhone}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'phone')} />
          </Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <Flex>
              <Flex.Item className={`${s.item} flex6`}>
              <img className={`${s.rightImg}`} src={yzm2Png} />
            <input
              placeholder="请输入验证码"
              type="number"
              className={`${s.sms}`}
              value={sms}
              onChange={this.handelSms}
            />
              </Flex.Item>
              <Flex.Item className={`${s.item} flex4`}>
                <div className={`${s.loginBtn}`} style={{fontSize:'0.12rem',marginLeft:'10%',display:this.state.isSend?'none':"block"}} onClick={this.sendSms}>{this.state.tipStr}</div>
                <div className={`${s.loginBtn}`} style={{fontSize:'0.12rem',marginLeft:'10%',display:this.state.isSend?'block':"none",backgroundColor:"rgba(70,161,251,.5)"}} >{this.state.sendStr}</div>
              </Flex.Item>
            </Flex>
            
          </Flex.Item>
         
          <Flex.Item className={`${s.item}`}>
            <div className={`${s.loginBtn}`} onClick={this.submitLogin}>修改交易密码</div>
          </Flex.Item>
          
        </Flex>
        
        </div>
        <AxFooter base={true} />
      </div>
    );
  }
}
